<!-- 头部 -->
<template>
  <div class="headBox">
      <div class="fullW head">
        <div class="left">
          <img :src="logo.img" class="logo" @click="linkTo('/')">

          <el-menu
            text-color="#0D0A19"
            active-text-color="#F67C36"
            router
            :default-active="currentPath"
            class="menu" mode="horizontal">
            <template v-for="item in menu">
              <el-menu-item v-if="!item.children"  :key="item.href" :index="item.href">{{item.name}}</el-menu-item>
              <el-submenu v-else :index="item.href" :key="item.href" >
                <template slot="title">{{ item.name }}</template>
                <el-menu-item v-for="ch in item.children" :key="ch.href" :index="ch.href">{{ch.name}}</el-menu-item>
              </el-submenu>
            </template>
          </el-menu>
        </div>

        <div class="right">
          <el-button v-waves type="primary" size="medium" v-if="button" @click="linkTo(button.href)">{{button.name}}</el-button>
        </div>

      </div>
  </div>
</template>
<script>
import { ALI_API } from '@/utils'
export default {
  async asyncData({ app, error, store }) {
    const response = await fetch(`${ALI_API}/kyb_office/header.json`)
    return await response.json()
  },
  data() {
    return {
      currentPath: '/',
      logo:{},
      menu:{},
      button:{}
    }
  },
  watch:{
    $route: {
      handler: function (val, oldVal) {
        this.currentPath = this.$route.path
      },
      // 深度观察监听
      deep: true
    },
  },
  mounted() {
    this.currentPath = this.$route.path
    this.fetchData( )
  },
  methods: {
    async fetchData(){
      const response = await fetch(`${ALI_API}/kyb_office/header.json`)
      const data = await response.json()

      this.logo = data.logo
      this.menu = data.menu
      this.button = data.button
    },
    linkTo(href){
      if(href){
        if(href.startsWith('http')){
          window.open(href)
        }else{
          this.$router.push(href);
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

.headBox {
  z-index: 99;
  position: sticky;
  top: 0;
  height: 72px;
  background-color: #fff;
  border-bottom: 1px solid rgba(180, 184, 192, 0.2);
}


  .head {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;

    .left {
      display: flex;
      align-items: center;

      .logo {
        margin-right: 10px;
        cursor: pointer;
        width: 128px;
        height: 28px;
      }

      .el-menu {
        flex: 1;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .icon-search {
        font-size: 24px;
        cursor: pointer;
        margin-right: 20px;
      }



      .shoppinCart {
        font-size: 16px;
        color: $use-color-dark;
        display: flex;
        align-items: center;
        cursor: pointer;


      }

      .iconfont {
        font-size: 24px;
      }

      .space {
        margin-right: 20px;
      }

      .avatar {
        display: inline-block;
      }
    }
  }


::v-deep(.menu) {
  border-bottom: 1px solid rgba(180, 184, 192, 0.2);

  &.el-menu--horizontal>.el-menu-item,&.el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 71px;
    line-height: 71px;
    background-color: transparent !important;
    padding: 0;
  }

  .el-menu-item,&.el-menu--horizontal > .el-submenu .el-submenu__title {
    margin: 0 24px;
    font-weight: bold;
  }

  .el-menu-item:not(.is-disabled):hover,
  .el-menu-item:not(.is-disabled):focus {
    background-color: transparent;
  }
}


</style>
